<template>
  <nav-bar id="nav_bar" ref="nav_bar"/>
  <el-button type="danger"
             @click="on_click_logout"
             style="width: 10%; height: 10%; margin-top: 20px">注销
  </el-button>
  <el-button type="primary"
             @click="on_click_register"
             v-show="is_super_account()"
             style="width: 10%; height: 10%; margin-top: 20px">注册
  </el-button>

  <el-dialog v-model="register_visible" title="注册">
    <el-form :model="register_form"
             status-icon
             ref="register_form"
             label-position="left"
             label-width="100px"
             :rules="register_rules">
      <el-form-item prop="username" label="用户名">
        <el-input type="text"
                  v-model="register_form.username"
                  auto-complete="off"

        ></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input type="password"
                  v-model="register_form.password"
                  auto-complete="off"

        ></el-input>
      </el-form-item>
      <el-form-item prop="confirm_password" label="确认密码">
        <el-input type="password"
                  v-model="register_form.confirm_password"
                  auto-complete="off"

        ></el-input>
      </el-form-item>
      <el-form-item label="读写权限" prop="perm">
        <el-checkbox-group v-model="register_form.perm">
          <el-checkbox v-for="group in groups" :label="group" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary"
                   style="width:100%;
                   margin-top: 20px"
                   @click="summit_register">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import NavBar from "../components/nav-bar/nav_bar"
import axios from "axios";

export default {
  name: "Personal",
  components: {
    NavBar,
  },
  data() { // 这里如果写成data: () { return ...}会导致validator失效
    const password_validator = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请确认密码'))
      } else if (value.length < 6 || value.length > 20) {
        callback(new Error('长度在6到20之间'))
      } else if (value !== this.register_form.password) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      register_visible: false,
      register_form: {
        username: '',
        password: '',
        confirm_password: '',
        perm: [],
        clear() {
          this.username = this.password = this.confirm_password = ''
        }
      },
      register_rules: {
        username: [
          {required: true, trigger: 'blur', message: '请完成必填项'},
          {min: 1, max: 20, trigger: 'blur'}
        ],
        password: [
          {required: true, trigger: 'blur', message: '请完成必填项'},
          {min: 5, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur'}
        ],
        confirm_password: [
          {required: true, trigger: 'blur', message: '请完成必填项'},
          {validator: password_validator, trigger: 'blur'}
        ],
        perm: [
          {type: 'array', required: true, message: '请至少选择一个权限', trigger: 'blur'}
        ]
      },
      groups: ['民乐团', '交响乐团', '管乐团', '行进管乐团', '舞蹈团',
        '合唱团', '话剧团', '主持团', '曲艺团', '踢踏舞团', '罗阳剧团',]
    }
  },
  methods: {
    is_super_account() {
      return this.$store.state.perm_code === 0xffffffff
    },
    on_click_logout() {
      axios.post(this.$store.state.post_site_dir.logout,
          {key: this.$store.state.key})
          .then((res) => {
            if (res.data.error_code !== 0) {
              this.$message.error('注销失败，请重试')
            } else {
              this.$store.commit('logout')
              this.$message({
                type: 'success',
                message: '注销成功!'
              });
              this.$router.push({path: '/'})
            }
          })
    },
    on_click_register() {
      this.register_visible = true
    },
    summit_register() {

      this.$refs['register_form'].validate((valid) => {
        // 先算perm_code
        let perm_code = 0
        this.$message('perm = ' + this.register_form.perm)
        this.register_form.perm.forEach((element) => {
          perm_code = perm_code | this.$store.state.perm_code_dir.name2code[element]
        })
        alert('ERROR: perm_code = ' + perm_code)
        let data = {
          key: this.$store.state.key,
          username: this.register_form.username,
          password: this.register_form.password,
          perm_code: perm_code
        }
        if (valid) {
          axios.post(this.$store.state.post_site_dir.register, data)
              .then((res) => {
                if (res.data.error_code === 0) {
                  this.register_visible = false
                  this.register_form.clear()
                  this.$message({
                    type: 'success',
                    message: '注册成功！'
                  })
                } else if (res.data.error_code === 1) {
                  this.$message.error("用户名已存在")
                } else {
                  this.$message.error("未知错误，请刷新重试或联系管理员")
                }
              })
        } else {
          this.$message.error('注册失败，请刷新重试')
        }
      })
    }


  },
  mounted() {
    // 设置导航栏和tab的高亮
    this.$refs.nav_bar.set_default_active_nav(6) // ‘个人’在字典里没有，这里是特例
  }

}
</script>

<style scoped>

</style>